<style type="text/css">
#cart-box{
  position:relative;
  width: 70px;
}
#cart-box img{
  width:100%;
}
#cart-box #cart-count{
  position: absolute;
  right:-20px;
  top:-5px;
  font-size:0.8em;
  font-weight: bold;
  width:50px;
  height:50px;
  background: red;
  color: white;
  border-radius: 50%;
  line-height:50px;
  text-align: center;
}
#container{
  width:90%;
  margin: 10px auto;
  display: flex;
  flex-deriction: row;
  flex-wrap: wrap;
  justify-content: center;
}
#product-box{
  width: 150px;
  position:relative;
  border:1px solid #eee;
  border-radius: 5px;
  box-shadow: 5px 5px 10px 2px #eee;
  padding:5px;
  margin: 20px;
}
#product-box img{
  width:100%;
}
#product-box #add{
  position:absolute;
  top:45%;
  right:0;
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: pink;
  color: white;
  text-align:center;
  font-size:30px;
  border-radius: 50%;
}
#product-box #add:hover{
  cursor: pointer;
}
</style>
<script src="./js/vue.js"></script>
<div id="app">
<cart></cart>
<div id="container">
<item v-for="product in products" :product-data="product"></item>
</div>
</div>
<script type="text/javascript">
var bus = new Vue();
Vue.component('item',{
  template: '\
<div id="product-box">\
<img :src=productData.img>\
<div id="add" @click="handleClick()">+</div>\
<h3>{{productData.name}}</h3>\
<h4>{{productData.price | formatMoney}}</h4>\
</div>',
  props: ['productData'],
  methods: {
    handleClick: function(){
        bus.$emit('plus',this.productData.price);
    }
  },
  filters: {
    formatMoney: function(value){
      return "$" + value;
    }
  }
});
Vue.component('cart',{
  template:'\
<div id="cart-box">\
<img src="http://www.iconninja.com/files/586/477/198/cart-icon.png">\
<div id="cart-count">{{total | formatMoney}}</div>\
</div>',
  data: function(){
    return {
      total: 0
    }
  },
  mounted: function(){
    var _this = this;
    bus.$on('plus',function(d){
      console.log(d);
      _this.total += d;
    });
  },
  filters: {
    formatMoney: function(value){
      return "$" + value;
    }
  }
});
var app = new Vue({
  el: '#app',
  data: {
    products: [
      {
        name: 'apple',
        price: 30,
        img: 'http://www.iconninja.com/files/525/265/114/apple-red-icon.png'
      },
      {
        name: 'banana',
        price: 10,
        img: 'http://www.iconninja.com/files/790/279/636/banana-icon.png'
      },
      {
        name: 'orange',
        price: 20,
        img: 'http://www.iconninja.com/files/690/848/1015/orange-icon.png'
      }
    ]
  }
});
</script>
